<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap介绍</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
        .row>div{
            border: 1px solid black;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <div class="row">
            <div class="col-md-8">8</div>
            <div class="col-md-4">4</div>
        </div>
        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">6</div>
        </div>
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
        </div>
    </div>
    <div class="container-fluid"></div>
<script>
    /*
    bootstrap 一.介绍  简洁直观 前端开发框架 让web开发更迅速简单 用于响应式开发,移动设备优先的WEB项目
                    官网https://www.bootcss.com/
                    是一个HTML,CSS,JavaScript的框架
                    包含常见的CSS样式，JavaScript的效果
               二.安装 第一种方法 直接引入文件的方式(用CDN的地址)
                    css:https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
                    js:https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
                       https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js
                    第二种方法 模块化的包管理方式
                    npm install bootstrap
                 三.使用 布局 (栅格系统)
                        Bootstrap需要为页面内容和栅格系统包裹侧一个.container，框架提供了两个类
                           1. .container类 用于固定宽度并支持响应式布局的容器
                                            <div class="container"></div>
                           2.container-fluid 类用于100%宽度占据全部视口（viewport）的容器
                                            <div class="container-fluid"></div>
                 注意:由于padding等属性的原因，这2中容器类不能互相嵌套
                            3.栅格系统
                                    bootstrap提供了一套响应式 移动设备优先的流式栅格系统
                                    随着屏幕或者视口(viewport)尺寸的增加，系统自动分为最多12列 (12份)
                                参数:      col-xs    col-sm   col-md    col-lg
                                           手机     ipaid    电脑      电视屏幕
                               最大宽度    none    750px      970px  1170px
                           如何适应移动设备和桌面两种屏幕
                 四.表格
                 五.表单
                 六.组件
                    javascript插件











*/
</script>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>
